<template>
  <div class="container">
    <div class="tabsNew">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="weightTabs">
        <el-tab-pane label="套餐列表" name="tclb" :lazy="true">
          <topSearch
            :form="form"
            :showAdd="checkPermission(['preparePackageCreate'])"
            @addItem="addItem"
            @searchlist="searchlist"
            @resetform="resetform"
          ></topSearch>
          <el-row>
            <el-table
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px"
              size="small"
            >
              <el-table-column
                prop="sort"
                label="排序"
                show-overflow-tooltip
                width="120"
              >
                <template slot="header" slot-scope="scope">
                  <span>排序</span>
                  <el-tooltip
                    style="margin-left: 10px"
                    effect="dark"
                    content="数字越小，排序越前"
                    placement="top"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-input
                    v-if="checkPermission(['preparePackageUpdateSort'])"
                    v-model="scope.row.sort"
                    @change="changeSort(scope.row)"
                    size="mini"
                    style="width: 80%"
                    class="textC"
                  >
                  </el-input>
                  <span v-else>{{ scope.row.sort }}</span>
                </template>
              </el-table-column>

              <el-table-column
                prop="tag"
                label="套餐标签"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="price"
                label="套餐单价（元）"
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column
                prop="total"
                label="套餐数量（人次）"
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column
                prop="create_time"
                label="创建时间"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="update_time"
                label="更新时间"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-switch
                    class="switch"
                    v-model="scope.row.status"
                    @change="changestatus(scope.row)"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="启用"
                    inactive-text="禁用"
                    v-if="checkPermission(['preparePackageUpdateStatus'])"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="editItem(scope.row)"
                    v-if="checkPermission(['preparePackageUpdate'])"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="deleteTableItem(scope.row)"
                    v-if="checkPermission(['preparePackageDelete'])"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-col :span="24" class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20]"
                :page-size="10"
                background
                :current-page.sync="page"
                layout="total, sizes, prev, pager, next"
                :total="pagination.total"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="套餐记录" name="tcjl" :lazy="true">
          <topSearch
            :form="form"
            :initiate="initiate"
            :showInitiate="true"
            :showAdd="false"
            @handleClick="handleClickSearch"
            @searchlist="searchlistR"
            @resetform="resetformR"
          ></topSearch>
          <el-row>
            <el-table
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px"
              size="small"
            >
              <el-table-column
                prop="order_id.order_id"
                label="订单号"
                show-overflow-tooltip
              ></el-table-column>
               <el-table-column
                prop="team_id"
                label="机构名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="order_id.userId"
                label="创建人"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="order_id.payType"
                label="支付方式"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="order_id.totalFee"
                label="支付金额（元）"
                show-overflow-tooltip
              ></el-table-column>
             
              <el-table-column
                prop="statusText"
                label="状态"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :style="{ color: scope.row.statusColor }">{{
                    scope.row.statusText
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="total"
                label="资源总量（人次）"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="total"
                label="剩余量（人次） "
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column
                prop="create_time"
                label="购买时间"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="due_time"
                label="有效截止时间 "
                align="center"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
            <el-col :span="24" class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20]"
                :page-size="10"
                background
                :current-page.sync="page"
                layout="total, sizes, prev, pager, next"
                :total="pagination.total"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 弹框 -->
    <subdialog
      :isshowDialog="isshowDialog"
      :dialogTitle="dialogTitle"
      :formType="formtype"
      :cityoptions="cityoptions"
      @confirm="confirm"
      @closedialog="closedialog"
      :dialogdata="dialogdata"
    ></subdialog>
  </div>
</template>

<script type="text/javascript">
import {
  preparepackage,
  packageRead,
  packageDelete,
  packageUpdatestatus,
  packageUpdateSort,
  preparepackageRecord,
} from "@/api/dataPreparation";
import subdialog from "./components/dialog";
import checkPermission from "@/utils/permission"; // 权限判断函数
import topSearch from "@/components/topSearch";
import { commonGetCity } from "@/api/examplace";
export default {
  data() {
    return {
      isshowDialog: false,
      dialogTitle: "新增",
      formtype: 0,
      page: 1,
      rows: 10,
      form: {
        state: null,
      },
      tableData: [],
      category: [],
      cityoptions: [],
      pagination: {},
      dialogdata: null,
      activeName: "tclb",
      currentIndex: 0,
      initiate:[{label:'全部',name:'qb'},{label:'待支付',name:'spz'},{label:'使用中',name:'ty'},{label:'已过期',name:'bty'},{label:'已用完',name:'yyw'},]
    };
  },
  components: {
    subdialog,
    topSearch,
  },
  created() {
    this.getData();
  },
  methods: {
    checkPermission,
    //切换类型
    handleClick(tab, event) {
      this.activeName = tab.name;
      this.page = 1;
      this.rows = 10;
      if (this.activeName == "tclb") {
        this.getData();
      } else {
        this.getRecordList();
      }
    },
    
    handleClickSearch(tab, event) {
      this.currentIndex = tab.index;
      this.getRecordList();
    },
    async changestatus(val) {
      let status = val.status == 0 ? 1 : 0;
      let params = {
        id: val.id,
        status: status,
      };
      let data = await packageUpdatestatus(params);
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    async changeSort(val) {
      let params = {
        id: val.id,
        sort: val.sort,
      };
      let data = await packageUpdateSort(params);
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    searchlist() {
      (this.page = 1), this.getData();
    },
     searchlistR() {
       this.page= 1,
      this.getRecordList();
    },
    resetform() {
      this.getData();
    },
    resetformR() {
      this.getRecordList();
    },
    handleSizeChange(val) {
      this.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    //详情
    async getquestionRead(id) {
      let data = await packageRead({ id: id });
      this.dialogdata = data.data;
    },

    //新增
    addItem() {
      this.isshowDialog = true;
      this.dialogTitle = "新增";
      this.formtype = 0;
    },
    //删除
    async deleteTableItem(val) {
      let data = await packageDelete({ id: val.id });
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    //编辑
    editItem(val) {
      this.isshowDialog = true;
      this.dialogTitle = "编辑";
      this.formtype = 1;
      this.getquestionRead(val.id);
    },

    //提交成功
    confirm() {
      this.isshowDialog = false;
      this.getData();
    },
    closedialog() {
      this.isshowDialog = false;
    },
    //获取列表
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.keyWord) {
        params.keyword = this.form.keyWord;
      }
      console.log(params);
      let data = await preparepackage(params);
      console.log(data);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
    //获取列表
    async getRecordList() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.keyWord) {
        params.keyword = this.form.keyWord;
      }
        if (this.currentIndex != 0) {
        params.status = this.currentIndex - 1
      }
      let data = await preparepackageRecord(params);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.contentTips {
  line-height: 2.2;
  .title {
    display: inline-block;
    width: 50px;
  }
  .marginL {
    margin-left: 50px;
  }
  .marginLS {
    margin-left: 10px;
  }
}
</style>
<style lang="scss" scoped>
::v-deep {
  .tips {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marginLS {
    margin-left: 10px;
  }
  .textC {
    .el-input__inner {
      text-align: center;
    }
  }
    .is-active {
    font-weight: bold;
  }
  .weightTabs .el-tabs__item {
    font-size: 16px;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__content{
    margin-top: 20px;
  }
}

</style>
